<template>
  <div class="page selectofflineWork-page" data-page="selectofflineWork" style="z-index: 2;">
    <div class="link-page-nav">
      <a href="#" class="link" @click="$root.backToTab()">
        <i class="iconfont icon-zuo"></i>
      </a>
    </div>
    <div class="link-page-top" style="padding-bottom: 17px;">
      <div class="link-page-title">开启离线作业</div>
    </div>
    <div class="page-content ptr-content infinite-scroll-content">
      <div class="hiddenDanger-block" style="margin-top:15px">
        <div class="selectofflineWork-title" style="margin-left: 21px;"><span class="must-fill">*</span>所在单位</div>
        <div class="right-con  has-arrow createReminderStyle" id="crTb_resUnit_div_{{getNewId}}" style="height: 20px;">
          <div id="crTb_resUnit_{{getNewId}}" class="right-select"
            style="float: left;margin-left: 25px;color: #333333;">选择单位</div>
          <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
        </div>
      </div>
      <div style="margin-top:15px">
        <div class="selectofflineWork-title" style="margin-left: 21px;"><span class="must-fill">*</span>选择作业模块</div>
        <div class="selectofflineWork_select selectofflineWork_daycheck" id="select_daycheck_{{getNewId}}"
          style="display: none;">
          <input name="checkbox" id="dayCheckBox" class="checkbox" type="checkbox" value="">
          <span>日常巡检</span>
        </div>
        <div class="selectofflineWork_select selectofflineWork_dayweibao" id="select_weibao_{{getNewId}}"
          style="display: none;">
          <input name="checkbox" id="dayWeibaoBox" class="checkbox" type="checkbox" value="" />
          <span>维保</span>
          <span class="select_tixing">请先将维保任务开启</span>
        </div>
      </div>
      <div class="select_true" @click="gotoOfflineWork">确定</div>
    </div>
  </div>
</template>
<script>
  return {
    data: function () {
      return {
        getNewId: (new Date()).getTime(),
        chargeCompany: '',
        dayCheck: 0,
        dayWeibao: 0,
        dayCheckFlag: false,
        dayWeibaoFlag: false,
        timer: null
      }
    },
    methods: {
      //选择业主单位
      select_unit: function () {
        var self = this;
        loadSelectUnitFunc(function (data) {
          if (self.chargeCompany == data.orgId) {
            $("#crTb_resUnit_" + self.getNewId).removeClass("select_color");
            $("#crTb_resUnit_" + self.getNewId).addClass("right-select");
            $("#crTb_resUnit_" + self.getNewId).html("选择单位");
            self.chargeCompany = 0;
          } else {
            //选择单位赋值
            $("#crTb_resUnit_" + self.getNewId).removeClass("right-select");
            $("#crTb_resUnit_" + self.getNewId).addClass("select_color");
            $("#crTb_resUnit_" + self.getNewId).html(data.orgName);
            native.saveDataByKey("OFFLINE_SELECT_ORGID", data.orgId)
            self.chargeCompany = data.orgId;
          }
          native.saveDataByKey("OFFLINE_SELECT_ORGID", data.orgId)
        }, self.chargeCompany);
      },
      gotoOfflineWork: function () {
        let self = this
        if (jQuery("#dayCheckBox").is(":checked")) {
          self.dayCheck = 1
        } else {
          self.dayCheck = 0
        }
        if (jQuery("#dayWeibaoBox").is(":checked")) {
          self.dayWeibao = 1
        } else {
          self.dayWeibao = 0
        }
        native.saveDataByKey("IS_OFFLINE_DAYCHECK", self.dayCheck);//日巡检
        native.saveDataByKey("IS_OFFLINE_DAYWEIBAO", self.dayWeibao);//维保
        if (self.chargeCompany) {
          if (self.dayCheck == 1 || self.dayWeibao == 1) {
            loadofflineWorkdownload(function (data) {
              let types = [];
              native.saveDataByKey("IS_OFFLINE_POPUP", 1);//弹窗出来后禁止返回
              setTimeout(function () {

                if (self.dayCheck == 1 && self.dayWeibao == 0) {
                  types = ['1']
                } else if (self.dayWeibao == 1 && self.dayCheck == 0) {
                  types = ['2']
                } else if (self.dayCheck == 1 && self.dayWeibao == 1) {
                  types = ['1', '2']
                }
                let num = 0
                native.loadOfflineWorkData(types, self.chargeCompany, function (status, progress) {
                  if (status == 0 && progress == 1) {
                    self.progressBar(100);
                  } else {
                    if (num == 0) {
                      self.progressBar(0);
                    }
                    num++
                  }
                  if (status == 1) {
                    jQuery(".load_down_offline").hide()
                    jQuery(".load_downSuccess_offline").hide()
                    jQuery(".load_downfail_offline").show()
                  }
                });
                native.saveDataByKey("OFFLINE_SELECT_ORGID", self.chargeCompany)
              }, 100);
              jQuery(".load_cancle_offline").off().on('click', function (e) {
                jQuery(".ilink-popup-backdrop").remove()
                native.saveDataByKey("IS_OFFLINE_MODULE", 0);
                app.popup.close()
                native.saveDataByKey("IS_OFFLINE_POPUP", 0)
                self.progressBar(0);
                common.loading(0)
              })
              jQuery(".start_offlineWork").off().on("click", function () {
                jQuery(".ilink-popup-backdrop").remove()
                native.saveDataByKey("IS_OFFLINE_MODULE", 1);
                native.saveDataByKey("IS_OFFLINE_POPUP", 0)
                app.router.navigate("/offlineWork/" + self.chargeCompany + "/" + self.dayCheck + "/" + self.dayWeibao + "/");
                app.popup.close()
                native.reloadH5FromFile();
                common.loading(0)
              })
              jQuery(".start_offlineWork_cancel").off().on("click", function () {
                native.saveDataByKey("IS_OFFLINE_POPUP", 0)
                app.popup.close()
                common.loading(0)
              })
              jQuery(".start_offlineWork_again").off().on("click", function () {
                //重新下载load_downSuccess_offline
                jQuery(".load_down_offline").show()
                jQuery(".load_downSuccess_offline").hide()
                jQuery(".load_downfail_offline").hide()
                self.gotoOfflineWork()
                //self.progressBar(100);
              })
            })
          } else {
            app.methods.showToastCenter('请选择作业模块');
          }
        } else {
          app.methods.showToastCenter('请选择单位');
        }
      },
      progressBar: function (proportion) {
        let self = this
        var width = 1;//进度条百分比
        function Yuan(id, num) {
          this.box = document.getElementById(id);//获取节点
          this.box.className = "wrap";
          //创建节点circle
          this.circle = document.createElement("div");
          this.circle.className = "circle";
          this.box.appendChild(this.circle);

          //创建circle的子节点left
          this.left = document.createElement("div");
          //this.left.className = "left";
          this.circle.appendChild(this.left);

          //创建circle的子节点right
          this.right = document.createElement("div");
          //this.right.className = "right";
          this.circle.appendChild(this.right);

          //创建节点num
          this.num = document.createElement("div");
          this.num.className = "boxnum";
          this.box.appendChild(this.num);
          let i = 0
          jQuery(".boxnum")[0].innerText = 0 + '%';
          this.left.className = "left";
          this.right.className = "right";
          common.loading(1)
          var timer = setInterval(function () {
            if (i < num + 1) {
              if (jQuery(".boxnum").length == 0) {
                i = 0
                clearInterval(timer);
                return
              }
              // 检测离线巡检任务下载完成
              if (native.offlineInspectTaskApiCount > 0) {
                i = parseInt(native.offlineInspectTaskAPiLoaded * 100 / native.offlineInspectTaskApiCount)
              } else {
                i++
              }
              box3.gx(i);
              if (jQuery(".boxnum").length != 0) {
                jQuery(".left").addClass('leftright')
                jQuery(".right").addClass('leftright')
                jQuery(".boxnum")[0].innerText = i * 1 + '%';
              }
              if (i == 100) {
                clearInterval(timer);
                jQuery(".load_down_offline").hide()
                jQuery(".load_downSuccess_offline").show()
                common.loading(0)
              }
            } else {
              clearInterval(timer);
              common.loading(0)
            }
          }, 1000);
        }

        Yuan.prototype.jz = function (num) {
          let i = 0;
          var that = this;
          var int = setInterval(function () {
            that.gx(num / 10 * i);
            i++;
            if (i > 10) {
              clearInterval(int)
            }
          }, 200);
        }

        Yuan.prototype.gx = function (n) {

          if (n <= 50) {
            this.right.style.display = 'none';
            this.circle.style.clip = 'rect(0, 100px, 100px, 50px)';
          } else {
            this.right.style.display = 'block';
            this.circle.style.clip = 'rect(auto, auto, auto, auto)';
          }
          this.left.style.transform = 'rotate(' + n * 360 / 100 + 'deg)';

        }
        let box3 = new Yuan('box3', proportion);
      },
      getOrganizationId: function () {
        var self = this;
        var $ = self.$;
        let unitListDatas = JSON.parse(sessionStorage.getItem('unitListData'))
        $("#crTb_resUnit_" + self.getNewId).empty();
        $("#crTb_resUnit_" + self.getNewId).append(unitListDatas[0].name);
        self.chargeCompany = userInfor.organizationIds;
        native.saveDataByKey("OFFLINE_SELECT_ORGID", self.chargeCompany)
        $("#crTb_resUnit_icon_" + self.getNewId).hide();
      },


    },
    on: {
      pageInit: function (e, page) {
        var self = this;
        var $ = self.$;
        native.saveDataByKey("OFFLINE_SELECT_FLAG", 1)//离线维保禁止推送
        if (userInfor.isMuilUnitUser == 0) { //单
          $("#crTb_resUnit_" + self.getNewId).empty();
          $("#crTb_resUnit_" + self.getNewId).append(userInfor.org.name);
          self.chargeCompany = single_Orgid;
          native.saveDataByKey("OFFLINE_SELECT_ORGID", self.chargeCompany)
          $("#crTb_resUnit_icon_" + self.getNewId).hide();
        } else {
          let organizationId = userInfor.organizationIds.split(',')
          if (organizationId.length > 1) {
            //选择单位
            $("#crTb_resUnit_div_" + self.getNewId).parent().on('click', function () {
              self.select_unit();
            });
          } else {
            self.getOrganizationId()
          }

        }
        jQuery("#select_daycheck_" + self.getNewId).off().on('click', function (e) {
          if (jQuery(e.target).hasClass('active')) {
            jQuery(e.target).removeClass('active')
            jQuery(e.target).find('input').prop("checked", false);
            self.dayCheck = 0
          } else {
            jQuery(e.target).addClass('active')
            jQuery(e.target).find('input').prop("checked", true);
            self.dayCheck = 1
          }
        });
        jQuery("#select_weibao_" + self.getNewId).off().on('click', function (e) {
          if (jQuery(e.target).hasClass('active')) {
            jQuery(e.target).removeClass('active')
            jQuery(e.target).find('input').prop("checked", false);
            self.dayWeibao = 0
          } else {
            jQuery(e.target).addClass('active')
            jQuery(e.target).find('input').prop("checked", true);
            self.dayWeibao = 1
          }
        });
        if (userInfor.resources.length > 0) {
          for (var i = 0; i < userInfor.resources.length; i++) {
            if (userInfor.resources[i].resourceName == "日常巡检") {
              jQuery(".selectofflineWork_daycheck").addClass('active')//默认选中checkbox
              jQuery(".selectofflineWork_daycheck").find('input').prop("checked", true);
              self.dayCheckFlag = true
              jQuery("#select_daycheck_" + self.getNewId).show()
              self.dayCheck = 1
            }
            if (userInfor.resources[i].resourceName == "维保巡查" || userInfor.resources[i].resourceName == "保养" || userInfor.resources[i].resourceName == "单点测试" || userInfor.resources[i].resourceName == "联动测试") {
              jQuery(".selectofflineWork_dayweibao").addClass('active')//默认选中checkbox
              jQuery(".selectofflineWork_dayweibao").find('input').prop("checked", true);
              jQuery("#select_weibao_" + self.getNewId).show()
              self.dayWeibao = 1
            }
          }
        }


      },
      pageBeforeRemove: function (e, page) {
        var self = this;
        native.saveDataByKey("OFFLINE_SELECT_FLAG", 0)
      },
      pageAfterIn: function (e, page) {
        var self = this;
        var $ = self.$;
      },
    }
  }
</script>
<style scoped>
  .selectofflineWork-title {
    font-size: 15px;
    color: #333333;
    vertical-align: top;
    font-weight: bold;
  }

  .selectofflineWork_select {
    margin-left: 20px;
    margin-top: 15px;
  }

  .checkbox {
    width: 20px;
    height: 20px;
  }

  .select_true {
    margin-top: 42px;
    margin-left: 5%;
    width: 90%;
    height: 40px;
    line-height: 40px;
    bottom: 10px;
    background-color: #378bf6;
    color: #fff;
    text-align: center;
    font-size: 17px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 8px;
  }

  .select_tixing {
    float: right;
    color: red;
    margin-right: 20px;
  }
</style>